import React from "react";
import { Button, Form, Input, Modal, Select, Tooltip, Icon, Steps, Checkbox, Radio, InputNumber, Switch } from "antd";
import styles from "./robotAdd.less";
import UserSession from "@/UserSession";

const { Step } = Steps;

class RobotAdd extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			buttonLoading: false,
			stepType: 0,
			channel: null,
			infoData: null,
      applicationPlatform:"PURE_WEB"
		};
	}

	componentDidMount() {
		if (this.props.onRef) {
			this.props.onRef(this);
		}
	}

	setButtonLoading = (status) => {
		this.setState({ buttonLoading: status });
	};

	cancelModal = () => {
		const { form } = this.props;
		this.setState({
			buttonLoading: false,
			stepType: 0,
			infoData: null,
		});
		form.resetFields();
		this.props.closeAdd();
	};

	onSubmit = () => {
		const { infoData,applicationPlatform } = this.state;
		const { form } = this.props;
		form.validateFields((errors, values) => {
			if (!errors) {
				this.setState({ buttonLoading: true }, () => {
          console.log(infoData,values);
          let platformParams = ''
          if(applicationPlatform != 'PURE_WEB'){
            platformParams = JSON.stringify(values)
          }
          
          let applicationInfo = {
            applicationName:values.applicationName,
            applicationPlatform,
            type:1,
            moduleRobot:true,
            moduleKefu:false,
            moduleTicket:values.moduleTicket,
            platformParams,
            username:values.username,
            password:values.password,
            maxAccount:values.maxAccount
          }
          if(applicationPlatform === 'PURE_WEB' && values.type == 1){
            applicationInfo.loginType = values.loginType
          }
					this.props.addRobot(applicationInfo);
				});
			}
		});
	};

	checkName = (rule, value, callback) => {
		if (value && value.length > 20) {
			callback("应用名称名称最多为20个字符");
		} else {
			callback();
		}
	};

	nextStep = () => {
		const { form } = this.props;
    const { applicationPlatform } = this.state;
		form.validateFields((err, values) => {
			if (!err) {
				this.setState({ stepType: 1, channel: applicationPlatform, infoData: values });
			}
		});
	};

	previousStep = () => {
		const { infoData } = this.state;
		this.setState({ stepType: 0 }, () => {
			this.props.form.setFieldsValue(infoData);
		});
	};

  setModule = e => {
    this.props.form.setFieldsValue({ module: ['robot'] })
  }

	render() {
		const { visible } = this.props;
		const { getFieldDecorator, getFieldValue } = this.props.form;
		const { buttonLoading, stepType, channel,applicationPlatform } = this.state;
		const formItemLayout = {
			labelCol: { span: 5 },
			wrapperCol: { span: 19 },
		};
		const formTailLayout = {
			labelCol: { span: 0 },
			wrapperCol: { span: 19, offset: 5 },
		};

		return (
			<Modal
				title='添加企业'
				visible={visible}
				onCancel={this.cancelModal}
				okButtonProps={{ loading: buttonLoading }}
				width={850}
				footer={stepType === 0 ? [
					<Button type='primary' onClick={this.cancelModal}>取消</Button>,
					<Button type='primary' onClick={this.onSubmit}>确定</Button>,
				] : stepType === 1 ? [
					<Button type='primary' onClick={this.previousStep}>上一步</Button>,
					<Button type='primary' onClick={this.onSubmit}>确定</Button>,
				] : [
					<Button type='primary' onClick={this.cancelModal}>取消</Button>,
					<Button type='primary' onClick={this.onSubmit}>确定</Button>,
				]}
				destroyOnClose
        bodyStyle={{padding:0}}
			>
        <img style={{width:'100%'}} src={staticPath + "/robotAddBg.jpg"} />
        <div className={styles.stepBox}>
          <div style={{color:stepType == 0 ? '#3E5BFF' : '#333333'}}>
            <Icon type="edit" style={{marginRight:10}} />
            <span>填写企业信息</span>
          </div>
        </div>
				<Form {...formItemLayout}>
					{stepType === 0 ? (
						<div>
							<Form.Item {...formItemLayout} label={"企业名称"}>
								{getFieldDecorator("applicationName", {
									rules: [
										{ required: true, message: "请输入企业名称" },
										{ validator: this.checkName },
									],
								})(
									<Input
										placeholder={"请输入企业名称"}
										style={{ width: "94%" }}
										maxLength={20}
									/>
								)}
							</Form.Item>      
              <Form.Item label="管理员账号">
                {getFieldDecorator("username",{
                  rules: [{ required: true, message: "请输入管理员账号" }],
                })(
                  <Input placeholder="请输入管理员账号" style={{ width: "94%" }} />
                )}
              </Form.Item> 
              <Form.Item label="管理员密码">
                {getFieldDecorator("password",{
                  rules: [{ required: true, message: "请输入管理员密码" }],
                })(
                  <Input.Password placeholder="请输入管理员密码" style={{ width: "94%" }} />
                )}
              </Form.Item>      
              <Form.Item label="创建账号限制">
                {getFieldDecorator("maxAccount",{
                  rules: [{ required: true, message: "请输入创建账号限制" }],
                })(
                  <InputNumber placeholder="请输入创建账号限制" style={{ width: "94%" }} min={0} precision={0} />
                )}
              </Form.Item>
						</div>
					) : (
						""
					)}
					{stepType === 1 
            ? (
              channel && (channel == 'QWX_CORP_BUILD' || channel == 'QWX_NATIVE') 
              ? (
                <div>
                  <Form.Item label={
                    <span>
                      企业Id&nbsp;
                      <Tooltip title='登录企业微信管理后台，在"我的企业>企业信息"中找到企业ID'>
                        <Icon type='question-circle-o' />
                      </Tooltip>
                    </span>
                  }>
                    {getFieldDecorator("corpId", {
                      rules: [
                        { required: true, message: "请填写企业Id" },
                      ],
                    })(
                      <Input placeholder={"请输入企业Id"} style={{ width: "94%" }} />
                    )}
                  </Form.Item>
                  <Form.Item label={
                    <span>
                      应用AgentId&nbsp;
                      <Tooltip title='企业微信管理后台"应用管理"中自建应用部分，点击"创建应用"，创建完成后即可获得AgentId和Secret'>
                        <Icon type='question-circle-o' />
                      </Tooltip>
                    </span>
                  }>
                    {getFieldDecorator("agentId", {
                      rules: [
                        { required: true, message: "请填写应用AgentId" },
                      ],
                    })(
                      <Input placeholder={"请输入应用AgentId"} style={{ width: "94%" }} />
                    )}
                  </Form.Item>
                  <Form.Item label={
                    <span>
                      应用Secret&nbsp;
                      <Tooltip title='企业微信管理后台"应用管理"中自建应用部分，点击"创建应用"，创建完成后即可获得AgentId和Secret'>
                        <Icon type='question-circle-o' />
                      </Tooltip>
                    </span>
                  }>
                    {getFieldDecorator("agentSecret")(
                      <Input placeholder={"请输入应用Secret"} style={{ width: "94%" }} />
                    )}
                  </Form.Item>
                  {
                    channel == 'QWX_NATIVE' ? (
                      <div>
                        <Form.Item label={
                          <span>
                            Token&nbsp;
                            <Tooltip title='在企业微信的API接收消息配置页，填写接收消息的URL后点击Token后面的“随机获取”获取Token'>
                              <Icon type='question-circle-o' />
                            </Tooltip>
                          </span>
                        }>
                          {getFieldDecorator("receiveToken")(
                            <Input placeholder={"请输入Token"} style={{ width: "94%" }} />
                          )}
                        </Form.Item>
                        <Form.Item label={
                          <span>
                          EncodingAESKey&nbsp;
                            <Tooltip title='在企业微信的API接收消息配置页，填写接收消息的URL后点击EncodingAESKey后面的“随机获取”获取EncodingAESKey'>
                              <Icon type='question-circle-o' />
                            </Tooltip>
                          </span>
                        }>
                          {getFieldDecorator("receiveEncodingAesKey")(
                            <Input placeholder={"请输入Token"} style={{ width: "94%" }} />
                          )}
                        </Form.Item>
                      </div>
                    ) : ''
                  }
                  
                </div>
              ) : 
              channel && (channel == 'DD_CORP_BUILD' || channel == 'DD_NATIVE') ? (
                <div>
                  <Form.Item label={
                    <span>
                    corpId&nbsp;
                      <Tooltip title='登录钉钉管理后台，在"我的企业>企业信息"中找到企业ID'>
                        <Icon type='question-circle-o' />
                      </Tooltip>
                    </span>
                  }>
                    {getFieldDecorator("corpId")(
                      <Input placeholder={"请输入corpId"} style={{ width: "94%" }} />
                    )}
                  </Form.Item>
                  <Form.Item label={
                    <span>
                    API Token&nbsp;
                      <Tooltip title='登录钉钉管理后台，在"我的企业>企业信息"中找到API Token'>
                        <Icon type='question-circle-o' />
                      </Tooltip>
                    </span>
                  }>
                    {getFieldDecorator("apiToken")(
                      <Input placeholder={"请输入API Token"} style={{ width: "94%" }} />
                    )}
                  </Form.Item>
                  <Form.Item label={
                    <span>
                    AgentId&nbsp;
                      <Tooltip title='钉钉管理后台"应用管理"中自建应用部分，点击"创建应用"，创建完成后即可获得AgentId、AppKey和AppSecret'>
                        <Icon type='question-circle-o' />
                      </Tooltip>
                    </span>
                  }>
                    {getFieldDecorator("agentId")(
                      <Input placeholder={"请输入AgentId"} style={{ width: "94%" }} />
                    )}
                  </Form.Item>
                  <Form.Item label={
                    <span>
                    APPKey&nbsp;
                      <Tooltip title='钉钉管理后台"应用管理"中自建应用部分，点击"创建应用"，创建完成后即可获得AgentId、AppKey和AppSecret'>
                        <Icon type='question-circle-o' />
                      </Tooltip>
                    </span>
                  }>
                    {getFieldDecorator("appKey")(
                      <Input placeholder={"请输入APPKey"} style={{ width: "94%" }} />
                    )}
                  </Form.Item>
                  <Form.Item label={
                    <span>
                    AppSecret&nbsp;
                      <Tooltip title='钉钉管理后台"应用管理"中自建应用部分，点击"创建应用"，创建完成后即可获得AgentId、AppKey和AppSecret'>
                        <Icon type='question-circle-o' />
                      </Tooltip>
                    </span>
                  }>
                    {getFieldDecorator("appSecret")(
                      <Input placeholder={"请输入AppSecret"} style={{ width: "94%" }} />
                    )}
                  </Form.Item>
                </div>
              )
              : 
              channel && (channel == 'FS_CORP_BUILD' || channel == 'FS_NATIVE') ? (
                <div>
                  <Form.Item label={ <span>AppId</span> }>
                    {getFieldDecorator("appId",{rules:[{required:true,message:"请输入appId"}]})(
                      <Input placeholder={"请输入appId"} style={{ width: "94%" }} />
                    )}
                  </Form.Item>
                  <Form.Item label={ <span>AppSecret</span> }>
                    {getFieldDecorator("appSecret",{rules:[{required:true,message:"请输入appSecret"}]})(
                      <Input placeholder={"请输入appSecret"} style={{ width: "94%" }} />
                    )}
                  </Form.Item>
                  {
                    channel == 'FS_NATIVE' ? (
                      <div>
                        <Form.Item label={ <span>EncryptKey</span> }>
                          {getFieldDecorator("encryptKey")(
                            <Input placeholder={"请输入encryptKey"} style={{ width: "94%" }} />
                          )}
                        </Form.Item>
                        <Form.Item label={ <span>VerificationToken</span> }>
                          {getFieldDecorator("verificationToken",{rules:[{required:true,message:"请输入verificationToken"}]})(
                            <Input placeholder={"请输入verificationToken"} style={{ width: "94%" }} />
                          )}
                        </Form.Item>
                      </div>
                    ) : ''
                  }
                </div>
              )
              :
              (
                <div
                  style={{
                    background: "#FAFAFA",
                    border: "1px solid #DCDFE6",
                    borderRadius: 4,
                    padding: "0 20px",
                    color: " #333333",
                    fontSize: "14px",
                    width: 'calc(90% - 40px)',
                    margin: "0 auto",
                    boxSizing: "content-box",
                    lineHeight: "39px",
                    marginBottom: "40px",
                  }}
                >
                  {
                    channel == 'DIGITAL_SCREEN' ? '数字大屏接入，可以直接生成应用，打开使用' : '网页接入，不需要填写渠道信息配置，可直接确定生成应用。在应用的渠道配置中，可应用网页网址或者代码接入。'
                  }
                </div>
              )
          ) 
          : 
          ("")}
				</Form>
			</Modal>
		);
	}
}

export default Form.create()(RobotAdd);
